<template>
  <div>
    <el-row>
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="部门名称">
          <el-input
            v-model="searchForm.orgName"
            placeholder="部门名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="部门状态">
          <el-input
            v-model="searchForm.orgName"
            placeholder="部门状态"
          ></el-input>
        </el-form-item>
      </el-form>
    </el-row>

    <el-container>
      <el-aside width="500px">
        <tr>
          部门列表
        </tr>
        <el-tree
          :data="orgVOList"
          :props="defaultProps"
          node-key="id"
          >
          <!-- 插槽，放自定义节点内容此处的class和slot-scope均是固定写法 -->
          <span class = "custom-tree-node" slot-scope = " { node, data }">
            <!-- label标题 -->
            <span>{{ data.orgName }}</span>
            <!-- 此处底下的sysDeafult标识的是是否是系统默认项，如果是，则值为1，不是系统默认项，自己添加的则值为0 -->
            <span class="tree-botton-arr" v-if = "data.sysDefault !=1">
              <!-- 新增按钮  如果node.level等于1即 该节点为一级父节点，则出现新增按钮 -->
              <el-button type="text" size="mini" @click="() => append(data, node)" v-if="node.level === 1">
                <i class = "el-icon-plus"></i>
              </el-button>
              <!-- 删除按钮 -->
              <el-button type="text" size="mini" @click = "() => remove(node, data)">
                <i class = "el-icon-delete"></i>
              </el-button>
              <!-- 编辑按钮 -->
              <el-button type="text" size="mini" @click = "() => edit(node, data)">
                <i class="el-icon-edit"></i>
              </el-button>
            </span>
          </span> 
        </el-tree>
      </el-aside>
      <el-main> Main </el-main>
    </el-container>
  </div>
</template>

<script>
import { getOrgVOList } from "@/api/orgConfig/org.js";

export default {
  name: "Org",
  data() {
    return {
      // 搜索表单
      searchForm: {
        // 部门名称
        orgName: "",
        // 组织状态
        status: "",
      },

      orgVOList: [
    
      ],
      defaultProps: {
        children: "childList",
        label: "orgName",
      },
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },

    //查询部门列表,
    getOrgVOList(data) {
      getOrgVOList(data).then(response => {
        if (response.success != true) {
          this.$message({
            message: response.message,
            type: "error",
          });
        }
        this.orgVOList = [response.data];
      });
    },
  },

  mounted() {
    this.getOrgVOList();
  },
};
</script>

<style scoped>
</style>